import React, { Component } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import {FindStyled } from './FindStyled'

import TitleBar from 'pages/hall/component/Titlebar'

import RecommendedFriends from './child/RecommendedFriends'
import CircleOfFriends from './child/CircleOfFriends'


const barArr = [
  {
  title : "推荐好友",
  routePath : "/index/find/recommendedFriends",
  component : RecommendedFriends,
  tag : 0,
},
{
  title : "帮友圈",
  routePath : "/index/find/circleOfFriends",
  component : CircleOfFriends,
  tag : 1,
},]
let selBill = 0



class Find extends Component {
  state = {}
  render() {
    barArr.forEach((value,index)=>{
      console.log(value,index);
      
      if(value.routePath === this.props.location.pathname){
        selBill  = value.tag
      }
    })
    return (
      <FindStyled>
       
        <TitleBar
        barArr = {barArr}
        taskIndex = {selBill}
        titleBorderWidth='0 0 5px 0'
        titleWidth = '.61rem'
        titleHeigh= '.44rem'
        selectedTitleBorderColor='#56D9D1'
        titleColor = '#646464'
        titleSize = '.13rem'
        ></TitleBar>

        <Switch>
          {
            barArr.map((value,index)=>(
              <Route key={index} path={value.routePath} component={value.component}></Route>
            ))
          }
          <Redirect from="/index/find" to={barArr[selBill?selBill:0].routePath} exact></Redirect>
          {/* <Route component={Page404}></Route> */}
        </Switch>

      </FindStyled>
    );
  }

 
}

export default Find;